<template>
  <div class="container">
    <!-- 头部搜索 -->
    <el-card class="card_body">
      <el-row :gutter="20">
        <span class="key_text">关键字</span>
        <el-col :span="6">
          <el-input
            v-model="queryInfo.keyword"
            placeholder="根据编号搜索"
            @clear="getGroupQuestionList"
            clearable
          ></el-input>
        </el-col>
        <div class="btn_right">
          <el-button size="small" plain @click="clsInput">清除</el-button>
          <el-button size="small" type="primary" @click="getGroupQuestionList">搜索</el-button>
        </div>
      </el-row>

      <!-- 提示文本 -->
      <div class="alert_padding">
        <el-alert :title="'数据一共' +total + '条'" type="info" show-icon></el-alert>
      </div>

      <!-- table 表格区域  -->
      <el-table :data="groupQuestionList" stripe style="width: 100%">
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="questionType" label="题型" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType === '1'">单选</span>
            <span v-else-if="scope.row.questionType === '2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column prop="questionIDs" label="题目编号">
          <template slot-scope="scope">
            <div v-for="(item, index) in scope.row.questionIDs" :key="index">
              <a href="#" style="color:#09f;" @click="previewDialogShoew(item)">{{ item.number }}</a>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="180"></el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)" width="125"></el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)" width="125"></el-table-column>
        <el-table-column prop="userName" label="录入人" width="125"></el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              circle
              plain
              type="danger"
              icon="el-icon-delete"
              @click="deleteRandoms(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination :queryInfo="queryInfo" :total="total" @pagination="getGroupQuestionList" />
    </el-card>

    <!-- 题目预览弹出框 -->
    <el-dialog
      v-if="previewDialogVisible"
      title="题目预览"
      :visible.sync="previewDialogVisible"
      width="900px"
      top="10vh"
    >
      <questions-preview :item="info"></questions-preview>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="previewDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { randoms as getGroupList, removeRandoms } from '@/api/hmmm/questions.js'
import questionsPreview from '../components/questions-preview.vue'
import Pagination from '@/components/Pagination'

export default {
  name: 'Rabdoms',
  data() {
    return {
      queryInfo: {
        keyword: '', // 关键字
        page: 1, // 当前页数
        pagesize: 10 // 页尺寸
      },
      total: 0, // 总条数
      // 组题列表
      groupQuestionList: [],
      // 题目预览弹出框显示与隐藏
      previewDialogVisible: false,
      info: {}
    }
  },
  created() {
    this.getGroupQuestionList()
  },
  methods: {
    // 获取组题列表
    async getGroupQuestionList() {
      const { data } = await getGroupList(this.queryInfo)
      // console.log(data)
      this.groupQuestionList = data.items
      this.total = data.counts
      // console.log(this.groupQuestionList)
    },

    // 清空文本
    clsInput() {
      this.queryInfo.keyword = ''
      this.getGroupQuestionList()
    },

    // 组题列表删除
    async deleteRandoms(info) {
      const confirmResult = await this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      if (confirmResult !== 'confirm') {
        return this.$message.error('您取消了删除')
      }
      console.log(info.id)
      const { data: res } = await removeRandoms({ id: info.id })
      this.$message.success('删除成功')
      this.getGroupQuestionList()
    },

    // 题目预览弹出框
    previewDialogShoew(item) {
      this.previewDialogVisible = true
      this.info = item
      // console.log(item)
      // console.log(this.info)
    }
  },
  components: {
    questionsPreview,
    Pagination
  }
}
</script>

<style scoped lang='scss'>
.container {
  padding: 0 10px;
  margin: 10px 0;

  .key_text {
    float: left;
    padding-left: 20px;
    font-size: 14px;
    vertical-align: middle;
    line-height: 40px;
    color: #606266;
    font-weight: 700;
    box-sizing: border-box;
  }

  .btn_right {
    float: right;
    padding-right: 10px;
  }

  .alert_padding {
    margin: 15px 0px;
  }

  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }
}
</style>

